<template>
  <div>
    <div class="opt-area-02">
      <div class="right-con">
        <div class="input-frame">
          <Input
            type="text"
            @on-click="init()"
            placeholder="请输入小区名称"
            style="width: 164px"
            v-model="params.village_name"
            icon="ios-search"
          />
        </div>
        <Button
          type="info"
          class="button-in"
          @click="upModal1()"
          size="small"
        >添加小区信息</Button>
      </div>
    </div>
    <div>
      <Table
        :columns="columns1"
        border
        :data="data1"
        size="small"
      >
        <template
          slot-scope="{ index }"
          slot="index"
        >
          <strong>{{ index + 1 }}</strong>
        </template>
        <template
          slot-scope="{ row }"
          slot="action"
        >
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="upModal2(row)"
          >详情</Button>
          <Button
            type="error"
            size="small"
            @click="deleteRow(row)"
          >删除</Button>
        </template>
      </Table>
      <Row
        type="flex"
        justify="end"
        class="page_style"
      >
        <Page
          :current="params.pageNo"
          :total="params.totalRecord"
          show-sizer
          :page-size="params.pageSize"
          show-total
          @on-change="pageAction"
          @on-page-size-change="pageSizeChange"
        />
      </Row>
    </div>
    <Modal
      v-model="modal1"
      title="添加小区名称"
      @on-ok="ok"
    >
      <Row>
        <Col span="12">
        <Input
          v-model="data2.village_name"
          placeholder="请输入小区名称"
          style="margin-right: 5px"
        />
        </Col>
        <Col span="12">
        <Input
          v-model="data2.floor_num"
          type="number"
          placeholder="请输入小区楼的数量"
          style="margin-left: 5px"
        />
        </Col>
      </Row>
    </Modal>
    <Modal
      v-model="modal2"
      title="修改小区名称"
      @on-ok="ok2"
    >
      <Row>
        <Col span="12">
        <Input
          v-model="data2.village_name"
          placeholder="请输入小区名称"
          style="margin-right: 5px"
        />
        </Col>
        <Col span="12">
        <Input
          v-model="data2.floor_num"
          type="number"
          placeholder="请输入小区楼的数量"
          style="margin-left: 5px"
        />
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import {
  selectCommunityList,
  insertCommunity,
  updateCommunity
} from '@/api/yi-qing-fang-kong'
export default {
  name: 'community-list',
  data () {
    return {
      columns1: [
        { title: '序号', width: 60, slot: 'index' },
        { title: '小区名称', key: 'village_name', align: 'center' },
        { title: '录入人数', key: 'userCount', align: 'center' },
        { title: '楼数', key: 'floor_num', align: 'center' },
        { title: '操作', slot: 'action', width: 150, align: 'center' }
      ],
      params: {
        village_name: '',
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      data2: {
        village_name: '',
        floor_num: '',
        id: '',
        del_flag: ''
      },
      data1: [],
      modal1: false,
      modal2: false
    }
  },
  computed: {},
  watch: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      selectCommunityList(this.params).then((ret) => {
        if (ret.data.errcode === 0) {
          this.data1 = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    upModal1 () {
      this.modal1 = true
    },
    upModal2 (param) {
      this.modal2 = true
      this.data2.village_name = param.village_name
      this.data2.floor_num = param.floor_num
      this.data2.id = param.id
      this.data2.del_flag = param.del_flag
    },
    ok () {
      insertCommunity(this.data2).then((ret) => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '添加成功'
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    ok2 () {
      updateCommunity(this.data2).then((ret) => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '修改成功'
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '修改失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    deleteRow (param) {
      this.data2.del_flag = '1'
      this.data2.village_name = param.village_name
      this.data2.floor_num = param.floor_num
      this.data2.id = param.id
      updateCommunity(this.data2).then((ret) => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '删除成功'
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init(this.params.pageNo)
    }
  }
}
</script>

<style scoped>
.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.button-in {
  width: 100px;
  margin-top: 5px;
}

.opt-area-02 .right-con .input-frame {
  width: 100%;
  margin-right: 10px;
}

.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
</style>
